<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import {
  follow_tour_product_header_api,
  follow_tour_product_items_api,
} from "@/package/mall/api/new_guide";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import ListTypeItem from "../goods/components/list-type-item.vue";
import ListJpsItem from "./components/list-jps-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => {
  follow_tour_product_header_api().then((resp) => {
    typeList.value = resp.items;
  });
  reloadList();
});
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());

const queryData = reactive({ province_id: 0 });

const typeList = ref<any[]>([]);
const typeClick = (id: number) => {
  queryData.province_id = id;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return follow_tour_product_items_api({ ...query, ...toRaw(queryData) });
  });

const jpsClick = (id: string) => {
  // Router.navigateTo(`/package/mall/pages/jps/detail?id=${id}`);
  Router.navigateToMiniProgram(
    "wx5214fcfbdf6da440",
    `/package/product/pages/detail/detail2?id=${id}`
  );
};
</script>

<template>
  <PageSticky>
    <scroll-view class="list-type" scroll-x enhanced :show-scrollbar="false">
      <view class="list-type-space"></view>
      <view
        class="list-type-item"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        <ListTypeItem
          :isActive="queryData.province_id === i.id"
          :text="i.name"
        />
      </view>
    </scroll-view>
  </PageSticky>

  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="i of listData"
        :key="i.id"
        @click="jpsClick(i.id)"
      >
        <ListJpsItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
.list-type {
  height: 88rpx;
  white-space: nowrap;

  .list-type-space,
  .list-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .list-type-space {
    width: 30rpx;
  }

  .list-type-item {
    padding: 0 10rpx;
    margin-top: 16rpx;
    margin-right: 40rpx;
  }
}

.list-data {
  .list-data-wrapper {
    padding-top: 20rpx;
  }

  .list-data-item {
    margin: 0 30rpx 20rpx;
  }
}
</style>